<template>
  <div>
    <el-form :rules="rules" ref="formData" :model="formData" label-width="100px" label-position="right">
      <el-form-item label="标题：" prop="title">
        <el-input v-model="formData.title" placeholder="请输入标题" maxlength="50" show-word-limit/>
      </el-form-item>
      <el-form-item label="标签：" prop="labelIds">
        <!--filterable可搜索 clearable清空-->
        <el-cascader
          style="display: block"
          :options="labelOptions"
          :show-all-levels="false"
          :props="{ multiple: true, emitPath: true, children: 'labelList', value: 'id', label: 'name'}"
          filterable
          clearable
          v-model="formData.labelIds"
          :disabled="disabled"
        ></el-cascader>
      </el-form-item>
      <el-form-item label="主图：" prop="imageUrl">
        <!--action 上传图片的调用地址  accept接收上传类型
        show-file-list 是否列表展示上传的文件
        -->
        <el-upload
          class="avatar-uploader"
          action=""
          accept="image/*"
          :show-file-list="true"
          :http-request="uploadMainImg">
          <img v-if="formData.imageUrl" :src="formData.imageUrl" class="avatar">
          <i v-else class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload>
      </el-form-item>
      <el-form-item label="是否公开：" prop="ispublic">
        <el-radio-group v-model="formData.ispublic">
          <el-radio :label="0">不公开</el-radio>
          <el-radio :label="1">公开</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="简介：" prop="summary">
        <el-input type="textarea" v-model="formData.summary" placeholder="请输入简介"
                  maxlength="2000" show-word-limit :autosize="{minRows: 3}"/>
      </el-form-item>

      <el-form-item label="内容：" prop="content">
        <!--
            ref 就是唯一标识，相关于id
            v-model 绑定的markdown输入 框的内容
            :autofocus="false" 不会自动获取焦点
         -->
        <client-only>
          <mavon-editor :autofocus="false"
                        ref="md" v-model="formData.mdContent" @change="getMdHtml"
                        @imgAdd="uploadContentImg" @imgDel="delConentImg"
          />
        </client-only>
      </el-form-item>
      <el-row type="flex" justify="center">
        <el-button type="primary" @click="submitForm('formData')">提交审核</el-button>
      </el-row>
    </el-form>
  </div>
</template>

<script>
  export default {
    // 校验
    validate({query}) {
      // 如果有传递id,则是修改
      if(query.id) {
        return /^\d+$/.test(query.id)
      }
      return true
    },
    data() {
      const validateLable = (rule, value, callback) => {
        if(value && value.length>30) {
          this.disabled = true // 禁止选择
          callback(new Error('最多可选30个标签'))
        }else {
          this.disabled = false // 可以选择
          callback() // 校验通过，直接放行
        }
      }

      const validateContent = (rule, value, callback) => {
        if(this.formData.mdContent && this.formData.htmlContent) {
          callback() // 校验通过，直接放行
        }else {
          callback(new Error('请输入问答内容'))
        }
      }
      return {
        rules:{
          title:[{ required: true, message: '请输入标题', trigger: 'blur' }],
          labelIds:[
            { required: true, message: '请选择标签', trigger: 'blur' },
            { validator: validateLable, trigger: 'change'}
          ],
          content:  [
            { validator: validateContent, trigger: 'change'}
          ]
        },
        formData: {
          imageUrl: null, // 写出来，不写出来不会被渲染图片
          userId: this.$store.state.userInfo.uid, // 在提问题中，修复了此bug，要提交当前用户信息
          userImage: this.$store.state.userInfo.imageUrl,
          nickName: this.$store.state.userInfo.nickName
        },
        disabled: false, // 标签选择框： false可以选择，true不可选择
        labelOptions: [
          {
            id: 1,
            name: '前端',
            labelList: [
              {
                id: 1,
                name: 'html',
              },
              {
                id: 2,
                name: 'js',
              }
            ]
          },
          {
            id: 2,
            name: 'java',
            labelList: [
              {
                id: 3,
                name: 'spring',
              },
              {
                id: 4,
                name: 'servlet',
              },
              {
                id: 5,
                name: 'mybatis',
              }
            ]
          },
        ],
      }
    },
    methods: {
      submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            this.submitData()
          } else {
            return false
          }
        })
      },
      // 提交数据给后台
      async submitData() {
        let resp = null
        // 有文章id则修改，没有id则是新增
        console.log(this.formData.labelIds)
        const labelIds = this.formData.labelIds;
        console.log(labelIds)
        console.log(labelIds[0])
        if(this.formData.id) {
          // 修改
          resp = await this.$updateArticle(this.formData)
        }else {
          // 新增
          resp = await this.$addArticle(this.formData)
        }

        if(resp.code === 200) {
          this.$message.success('提交成功')
          // 提交成功后，跳转到此文章的详情页,  resp.data获取的是此文章id
          this.$router.push(`/article/${resp.data}`)
        }else {
          this.$message.error('提交失败')
        }
      },
      async uploadMainImg(file) {
        let resp = null
        // 上传主图片
        console.log('上传主图片file', file)
        // 封装上传图片的表单对象
        const data = new FormData()
        data.append('file', file.file)
        resp = await this.$uploadImg(data)
        debugger
        if (resp.code === 200) {
          console.log("上传成功")
          // 删除原图片
          this.deleteImg()
          // 回显上传后的图片
          this.formData.imageUrl = resp.data
        }
      },

      deleteImg() {
        if (this.formData.imageUrl) {
          console.log("有原图 删除")
          //如果有原图 则删除
          this.$deleteImg(this.formData.imageUrl)
        }
      },

      // mdContent md内容，htmlContent 转成html的内容
      getMdHtml(mdContent, htmlContent) {
        // console.log('mdContent', mdContent)
        // console.log('htmlContent', htmlContent)
        this.formData.mdContent = mdContent
        this.formData.htmlContent = htmlContent
      },
      // 上传内容图片（图片位置编号，File对象）
      uploadContentImg(pos, file) {
        // console.log('上传内容图片：', file)
        // 封装表单数据
        const fd = new FormData()
        fd.append('file', file)
        this.$uploadImg(fd).then(response => {
          if (response.code === 200) {
            // 上传成功，回显，
            this.$refs.md.$img2Url(pos, response.data)
          }
        })
      },

      delConentImg(urlAndFileArr) {
        const fileUrl = urlAndFileArr[0] //图片url
        const file = urlAndFileArr[1] //File对象
        // console.log('删除内容图片', fileUrl, file)
        // 删除内容图片
      },
    },
    async asyncData({app,query}) {
      const {data} = await app.$getCategoryLabelList();
      //查询文章详情
      if(query.id){
        const {data:formData} = await app.$getArticleById(query.id);
        return {labelOptions: data,formData}
      }
      return {labelOptions: data}
    }
  }
</script>

<style scoped>
  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }

  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }

  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }

  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
</style>
